<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude"
      xmlns:mochi="http://www.mochikit.com/">
  <xi:include href="master.html" />

<head>
<!--specify refresh time in general_format.js-->

<title>Clusters</title>

<link rel="stylesheet" type="text/css" media="screen" href="${tg.url('/css/style.css')}" />

<script type = "text/javascript">

var temp_sort_key = 1; //specify the column to sort when loading the page
var numtables = 1; //number of tables in the web page
var sort_managers_array = new Array(numtables);

</script>

<script type = "text/javascript" src="/cloudcrvjs/sortable_tables.js"></script>
<script type = "text/javascript" src="/cloudcrvjs/general_format.js"></script>
<script type = "text/javascript" src="/cloudcrvjs/ibox.js"></script>
<!--ibox must go after sortable_tables to keep popup windows (possible method overwrite)-->

<script type = "text/javascript">
/* <![CDATA[ */

function ajaxRequest(){
 var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
 if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
  for (var i=0; i < activexmodes.length; i++){
   try{
    return new ActiveXObject(activexmodes[i])
   }
   catch(e){
    //suppress error
   }
  }
 }
 else if (window.XMLHttpRequest) // if Mozilla, Safari etc
  return new XMLHttpRequest()
 else
  return false
}

function disableStartButton(clusterid) {
  document.getElementById("start_button"+clusterid).disabled=true
} 

function doClusterAction(clusterid,action) {

var mygetrequest=new ajaxRequest()
mygetrequest.onreadystatechange=function(){
 if (mygetrequest.readyState==4){
  if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1){
    if (mygetrequest.responseText=="True") {
//      alert("Operation Success")
    } else {
      alert("Operation Failed: status="+mygetrequest.status+" response="+mygetrequest.responseText)
    }
  }
  else{
   alert("An error has occured making the request status="+mygetrequest.status+" href="+window.location.href)
  }
  refresh()
 }

}
mygetrequest.open("GET", "/status/doClusterAction?clusterid="+clusterid+"&action="+action, true)
mygetrequest.send(null)
}

function disableScaling(clusterid) {
 document.getElementById("scale_button"+clusterid).disabled=true;
 document.getElementById("num_extra_workers"+clusterid).disabled=true;
 document.getElementById("scale_type"+clusterid).disabled=true;
}

function enableScaling(clusterid) {
 document.getElementById("scale_button"+clusterid).disabled=false;
 document.getElementById("num_extra_workers"+clusterid).disabled=false;
 document.getElementById("scale_type"+clusterid).disabled=false;
}

function doScaling(clusterid, currentNumWorkers) {

var mygetrequest=new ajaxRequest()
mygetrequest.onreadystatechange=function(){
 if (mygetrequest.readyState==4){
  if (mygetrequest.status==200 || window.location.href.indexOf("http")==-1){
    if (mygetrequest.responseText=="True") {
//      alert("Operation Success")
    } else {
      alert("Operation Failed: status="+mygetrequest.status+" response="+mygetrequest.responseText)
    }
  }
  else{
   alert("An error has occured making the request status="+mygetrequest.status+" href="+window.location.href)
  }
  refresh()
 }

}

var numExtraWorkers = document.getElementById("num_extra_workers"+clusterid).value;
var scaleType = document.getElementById("scale_type"+clusterid).value;
if (numExtraWorkers == "" || isNaN(numExtraWorkers)) {
 alert("Scale Amt. must be a positive integer.");
 enableScaling(clusterid);
} else {
 numExtraWorkers = parseInt(numExtraWorkers);
 if (numExtraWorkers <= 0) {
  alert("Scale Amt. must be a positive integer");
  enableScaling(clusterid);
 } else {
  if (scaleType == "down" && currentNumWorkers < numExtraWorkers) {
   //don't do anything if there are fewer current workers than the amount to scale down
   alert("There aren't " + numExtraWorkers + " to remove.");
   enableScaling(clusterid);
  } else {
   mygetrequest.open("GET", "/status/doScaling?clusterid="+clusterid+"&scaleType="+scaleType+"&numExtraWorkers="+numExtraWorkers, true)
   mygetrequest.send(null)
  }
 }
}

}


function extraload()
{
    //use for anything that needs to be done on load
    //for specifying a different sort_key for a specific table
    //sort_managers_array[1].sortkey = 0;
}

function extraunload()
{
    //use for anything that needs to be done on unload
}

addLoadEvent(function () { pageload("clusters", 1); });
/* ]]> */
</script>

</head>

<!--see roles2.html for documentation about how tables are made-->

<body onUnload="unload('clusters', 1); extraunload(); "> <!--the second argument of unload must be equal to numtables (see above)-->

<!--<h2><a href="/roles2">Roles</a>  <a href="/vms2">VMs</a>  Clusters</h2>-->

<div id="table0" style="overflow:auto; width:800px; height: 600px;">
<table border="1" id="sortable_table0" class="datagrid sofT"  cellspacing="0">
    <thead>
      <tr>
          <th class="helpHed" mochi:format="str" style="cursor:pointer">Name</th>
	  <th class="helpHed" mochi:format="str" style="cursor:pointer">Status</th>
	  <th class="helpHed" mochi:format="str" style="cursor:pointer">Attributes</th>
	  <th class="helpHed" mochi:format="str" style="cursor:pointer">Roles</th>
	  <th class="helpHed" mochi:format="str" style="cursor:pointer"># Workers</th>
	  <th class="helpHed">Scale Amt.</th>
	  <th class="helpHed">Scale Type</th>
	  <th class="helpHed">Scale</th>
	  <th class="helpHed">Action</th>
      </tr>
    </thead> 
    <tbody>
      <div py:for="i in range(0, len(clusters))">
        <tr>
	    <td>
	      ${clusters[i].getAttr("name")}</td>
	    <td bgcolor="${SC_colors[clusters[i].status % len(SC_colors)]}">
	      <font color="black">
	      ${SC_table[clusters[i].status]}</font></td>
	    <td>     
	      <a href="${'/dispcl/'+clusters[i].getAttr('name')+'/attr'}" rel="ibox">Show Attr</a></td>
	    <td>
	      <a href="${'/dispcl/'+clusters[i].getAttr('name')+'/roles'}" rel="ibox">Show Roles</a></td>
<?python
startButtonValue="N/A"
startButtonDisable="Disabled"
startButtonAction=""
startButtonColor="#CCCCCC"
scaleButtonValue="N/A"
scaleDisable="Disabled"
scaleButtonColor="#CCCCCC"
scaleButtonAction=""
if clusters[i].status==clusters[i].SC.SC_INITIALIZED:
  startButtonValue="Start"
  startButtonDisable=None
  startButtonColor="#006600"
  startButtonAction="doClusterAction(%s,'start')"%(str(clusters[i].Cluster_ID));
elif clusters[i].status in (clusters[i].SC.SC_STARTING, clusters[i].SC.SC_UPDATING, clusters[i].SC.SC_UPDATED):
  startButtonValue="Stop"
  startButtonDisable=None
  startButtonColor="#e60000"
  startButtonAction="doClusterAction(%s,'stop')"%(str(clusters[i].Cluster_ID));
if clusters[i].status==clusters[i].SC.SC_UPDATED:
  scaleButtonValue="Start Scaling"
  scaleDisable=None
  scaleButtonColor="#006600"
  scaleButtonAction="doScaling(%s,%s)"%(str(clusters[i].Cluster_ID),str(clusters[i].getAttr("numWorkers")));
?>
	    <td>
              ${clusters[i].getAttr("numWorkers")}</td>
	    <td>
              <input type="text" id="num_extra_workers${str(clusters[i].Cluster_ID)}" py:attrs="{ 'disabled':scaleDisable }" value="" size="3"/></td>
	    <td>
	      <select id="scale_type${str(clusters[i].Cluster_ID)}" py:attrs="{ 'disabled':scaleDisable }">
		<option value="up">Scale Up</option>
		<option value="down">Scale Down</option>
	      </select></td>
	    <td>
              <input type="button" id="scale_button${str(clusters[i].Cluster_ID)}" py:attrs="{ 'disabled':scaleDisable }" value="${scaleButtonValue}" onclick="turnOffRefresh();disableScaling(${clusters[i].Cluster_ID});${scaleButtonAction}" style="${'background-color:%s;color:#fff;'%scaleButtonColor}"/></td>
            <td>
              <input type="button" id="start_button${str(clusters[i].Cluster_ID)}" py:attrs="{ 'disabled':startButtonDisable }" value="${startButtonValue}" onclick="turnOffRefresh();disableStartButton(${clusters[i].Cluster_ID});${startButtonAction}" style="${'background-color:%s;color:#fff;'%startButtonColor}"/></td>
	</tr>
      </div>
    </tbody>
</table>
</div>

</body>

</html>
